<template>
  <div class="container-form">
    <header class="group-title">
      <div :class="['item-title',{'active':nowAction==='login'}]" @click="$store.commit('form/TOOGEL_NOW_ACTION', 'login')">登录</div>
      <div :class="['item-title',{'active':nowAction==='register'}]" style=" width: 100%">
        <span @click="$store.commit('form/TOOGEL_NOW_ACTION', 'register')">注册</span>
        <span :class="['item-switchaction',{'active':nowAction==='login'}]" @click="$store.commit('form/TOOGEL_IS_VERIFYCODE_LOGIN', !isVerifycodeLogin)">{{isVerifycodeLogin?'密码':'验证码'}}登录</span>
      </div>
    </header>
    <div class="login-box">
      <mivaInput :isShow="nowAction==='register'" :maxlength="32" @blur="checkNickname" placeholder="请输入昵称" v-bind="nickname" v-model="nickname.value" />
      <mivaInput @input="checkSign" isShow="true" placeholder="请输入邮箱/手机号" v-bind="sign" v-model="sign.value" />
      <mivaInput :isShow="passwordShow" :show-password="true" @input="checkPassword" placeholder="请输入密码，密码格式为6-16个字符组成，区分大小写" type="password" v-bind="password" v-model="password.value" />
      <inputVerifycode :isShow="verifycodeShow" :sign="sign" :verifyCode="verifyCode" @click="getVerifycode" placeholder="请输入验证码" />
    </div>
    <div class="group-button" v-if="true">
      <itemButton :class="['item-button',{'active':nowAction==='login'}]" @click="toggleAction('login')" v-text="'登录'" />
      <itemButton :class="['item-button',{'active':nowAction==='register'}]" @click="toggleAction('register')" v-text="`注册`" />
    </div>
    <div class="group-other">
      <input type="checkbox" v-if="nowAction==='register'" v-model="isLicence" />
      <mivaLink class="i-other" to="http://baidu.com">用户协议</mivaLink>
      <mivaLink class="i-other" to="http://baidu.com">忘记密码</mivaLink>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { Notification } from 'element-ui';
import { verifyCheckNickname, verifyCheckPassword, verifyCheckSign, getVerifycode } from './utils/verify';
import inputVerifycode from './input-verifycode.vue';
import itemButton from './item-button.vue';
import mivaInput from './miva-input.vue';

export default {
    name: 'LoginFormModule',
    components: {
        mivaInput,
        itemButton,
        inputVerifycode,
    },
    data() {
        return {
            isLicence: false,
        };
    },
    computed: {
        ...mapState('form', [
            'nowAction',
            'isVerifycodeLogin',
            'sign',
            'nickname',
            'password',
            'verifyCode',
        ]),
        passwordShow() {
            const { nowAction, isVerifycodeLogin } = this;
            // 在注册界面显示
            if (nowAction === 'register') {
                return true;
            }
            // 在不显示验证码框的时候显示
            return isVerifycodeLogin === false;
        },
        verifycodeShow() {
            const { nowAction, sign, isVerifycodeLogin } = this;
            // 在登录界面,并且选择了验证码登录,并且帐号格式正确
            if (nowAction === 'login' && isVerifycodeLogin && sign.state) {
                return true;
            }
            // 在注册界面,并且帐号格式正确
            if (nowAction === 'register' && sign.state) {
                return true;
            }
            // 以外所有状态全部隐藏
            return false;
        },
    },
    methods: {
        toggleAction(action) { // 这个就是违背原则的做法, 现在遭报应了
            if (this.nowAction !== action) {
                this.$store.commit('form/TOOGEL_NOW_ACTION', action);
                return;
            }

            if (!this.isLicence && this.nowAction === 'register') {
                Notification({ message: '请先同意用户协议', offset: 50, showClose: false });
                return;
            }

            if (this.sign.value.trim() === '') {
                this.sign.tip = '帐号不能为空';
                this.sign.state = false;
                return;
            }

            if (!this.sign.signType) {
                this.sign.tip = '邮箱/手机号格式不正确';
                this.sign.state = false;
                return;
            }

            const loginType = this.isVerifycodeLogin ? 'verifyCode' : 'password';
            if (this[loginType].value.trim() === '') {
                this[loginType].tip = this.isVerifycodeLogin
                    ? '验证码不能为空'
                    : '密码不能为空';
                this[loginType].state = false;
                return;
            }
            // 如果是注册则执行注册操作
            if (this.nowAction === 'register') {
                this.$store.dispatch('form/registerHandler');
                return;
            }
            // 执行登录操作
            this.$store.dispatch('form/loginHandler').then(() => {
                this.$router.replace({
                    path: this.redirect || '/',
                    query: this.otherQuery,
                });
            }).catch((err) => {
                console.error(err);
            });
        },
        async checkNickname() {
            await verifyCheckNickname(this);
        },
        async checkSign() {
            await verifyCheckSign(this);
        },
        async getVerifycode() {
            await getVerifycode(this);
        },
        async checkPassword() {
            await verifyCheckPassword(this);
        },
    },
};
</script>

<style lang="less" src="./style/index.less"></style>
